import { Tabs } from '@cscec/udp-ui';
import React from 'react';

export default ({ tabs, outRef, render, id }: any) => {
  const innerTabs = tabs.map(({ title, body, ...tab }: any, key: number) => ({
    ...tab,
    key,
    label: title,
    children: render('body', body)
  }));

  return <Tabs id={id || 'tabs'} items={innerTabs} style={{ backgroundColor: 'var(--component-background)' }} />;
};
